<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            background-repeat: no-repeat;

        }

        #box {
            width: 600px;
            height: 1500px;
        }

        #boxtop {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .boxitem {
            display: flex;
            margin-bottom: 20px;
        }

        .bgimg {
            width: 300px;
            height: 169px;
            background-image: url(https://oss.9ihub.com/test/toutiao-02.jpeg);
            background-size: 100%;

        }

        .txt {
            width: 300px;
            height: 169px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .caption {
            font-size: 26px;
            font-weight: 800;
        }

        .comment {
            width: 60px;
            height: 24px;
            background-color: rgb(250, 176, 176, 0.8);
            color: red;
            border-radius: 5px;
        }

        .watch,
        .origin {
            color: gray;
        }

        .txt-botten {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="boxtop">
            <div
                style="background-image: url(https://oss.9ihub.com/test/icon-play.png);width: 172px;height: 72px;padding-left: 72px;font-size: 40px;font-weight: 800;line-height: 72px;">
                热门视频</div>
            <div
                style="background-image: url(https://oss.9ihub.com/test/icon-sx2.png);width: 48px;height: 48px;padding-left: 48px;line-height: 48px;">
                换一换</div>

        </div>
        <div id="boxcontent">
            <div class="boxitem">
                <div class="bgimg"></div>

                <div class="txt">
                    <div class="caption">无论做什么鱼：最忌放盐和料酒研制</div>
                    <div class="comment">1万评论</div>
                    <div class="txt-botten">
                        <div class="watch">148万次观看</div>
                        <div class="origin">司马南频道</div>
                    </div>
                </div>
            </div>
            <div class="boxitem">
                <div class="bgimg"></div>

                <div class="txt">
                    <div class="caption">无论做什么鱼：最忌放盐和料酒研制</div>
                    <div class="comment">1万评论</div>
                    <div class="txt-botten">
                        <div class="watch">148万次观看</div>
                        <div class="origin">司马南频道</div>
                    </div>
                </div>
            </div>
            <div class="boxitem">
                <div class="bgimg"></div>

                <div class="txt">
                    <div class="caption">无论做什么鱼：最忌放盐和料酒研制</div>
                    <div class="comment">1万评论</div>
                    <div class="txt-botten">
                        <div class="watch">148万次观看</div>
                        <div class="origin">司马南频道</div>
                    </div>
                </div>
            </div>
            <div class="boxitem">
                <div class="bgimg"></div>

                <div class="txt">
                    <div class="caption">无论做什么鱼：最忌放盐和料酒研制</div>
                    <div class="comment">1万评论</div>
                    <div class="txt-botten">
                        <div class="watch">148万次观看</div>
                        <div class="origin">司马南频道</div>
                    </div>
                </div>
            </div>

        </div>
</body>

</html>